<style lang="scss" scoped>
.dialog {
  padding: 20px;
}
</style>

<template>
  <el-dialog
    title="维护"
    :visible="showDialog"
    append-to-body
    :close-on-click-modal="false"
    @close="$emit('update:visible', false)"
  >
    <div class="dialog">

      <el-form ref="form" :model="form" :rules="formRules" label-width="80px">

        <el-form-item prop="brand_zh" label="中文品牌">
          <el-input v-model="form.brand_zh" />
        </el-form-item>

        <el-form-item prop="handleWhere" label="条件">
          <el-select v-model="form.handleWhere">
            <el-option
              v-for="item in conditionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="brand_en" label="英文品牌">
          <el-input v-model="form.brand_en" />
        </el-form-item>

        <el-form-item prop="brand_id" label="保留品牌">
          <el-input v-model="form.brand_id" type="number" auto-complete="off" />
        </el-form-item>

        <el-form-item prop="passWord" label="密码">
          <el-input v-model="form.passWord" type="password" auto-complete="off" />
        </el-form-item>

      </el-form>

    </div>
    <div slot="footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { handleRepair } from '@/api/base/brand'

/**
 * 条件枚举
 */
const ConditionEnum = Object.freeze({
  /**
   * 并且
   */
  And: 1,

  /**
   * 或者
   */
  Or: 2
})

export default {

  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      showDialog: this.visible,

      formRules: {

        brand_id: {
          required: true,
          message: '请输入保留品牌'
        },

        passWord: {
          required: true,
          message: '请输入密码'
        }
      },

      form: {
        brand_zh: '',
        brand_en: '',
        handleWhere: ConditionEnum.And,
        brand_id: '',
        passWord: ''
      },

      conditionOptions: [
        {
          label: '并且',
          value: ConditionEnum.And
        },
        {
          label: '或者',
          value: ConditionEnum.Or
        }
      ]
    }
  },

  methods: {

    submit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) return
        handleRepair(this.form).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.showDialog = false
        })
      })
    }

  }
}
</script>
